<template>
    <view class="wrap">
        <view class="contner">
            <view class="head">
                <text class="head_title">头像</text>
                <view class="avatar" @click="chooseTheImg">
                    <image :src="avatar || '../../static/images/my/001.png'" mode="scaleToFill" />
                </view>
            </view>
            <view class="username wrap">
                <view class="username_title">昵称</view>
                <u-input placeholder="输入中文或英文,1-8个字" border="none" v-model="niackname" inputAlign="right"></u-input>
            </view>
            <!-- 性别 -->
            <view class="sex wrap wrap" @click="show = true">
                <view class="sex_title">性别</view>
                <u-input placeholder="请选择性别" v-model="sex" border="none" inputAlign="right"></u-input>
            </view>
            <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
            <!-- 生日 -->
            <view class="birthday wrap" @click="show1 = true">
                <view class="birthday_title">生日</view>
                <u-input placeholder="请选择生日" v-model="birthday" border="none" inputAlign="right"></u-input>
            </view>
            <u-datetime-picker :show="show1" v-model="value1" :minDate="319970442000" :maxDate="1786778555000" mode="date"
                @confirm="confirm1" @cancel="cancel1"></u-datetime-picker>
            <!-- 地址 -->
            <view class="address wrap" @click="visible = true">
                <view class="address_title">地址</view>
                <u-input placeholder="请选择地址" v-model="addr" border="none" inputAlign="right"></u-input>
            </view>
            <cityPicker :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm2" @cancel="cancel2"
                :visible="visible" />
            <!-- 手机号 -->
            <view class="Tel wrap">
                <view class="address_title">手机号</view>
                <u-input placeholder="请输入手机号" v-model="Tel" border="none" inputAlign="right"></u-input>
            </view>
        </view>
        <view class="confirm" @click="submit">确定</view>
    </view>
</template>

<script>
import cityPicker from '../../components/piaoyi-cityPicker/pioayi-cityPicker.vue'
import timeStamp from '../../utils/Date.js'
import { getqiNiuToken } from '../../api/api'
import { get_edituserInfo } from '../../api/user'
export default {
    components: {
        cityPicker

    },
    computed: {
        userInfo() {
            return {
                ...this.$store.state.userInfo
            }

        }
    },
    data() {
        return {
            niackname: '',
            sex: '',
            birthday: '',
            show: false,
            show1: false,
            value1: Number(new Date()),
            columns: [
                ['男', '女']
            ],
            visible: false,
            defaultValue: '',
            addr: '',
            addr_code: '',
            maskCloseAble: true,
            Tel: '',
            imgFiles: [],
            token: '',
            times: '',
            avatar: ''
        }
    },
    mounted() {

    },
    methods: {
        //性别开关
        confirm(e) {
            this.sex = e.value[0]
            this.show = false
            console.log(this.userInfo)
        },
        cancel() {
            this.show = false
        },
        //生日开关
        confirm1(e) {
            console.log(e)
            this.birthday = e.value
            this.show1 = false

        },
        cancel1() {
            this.show1 = false
        },
        //地址
        confirm2(e) {
            console.log(e)
            this.addr = e.name
            this.visible = false
            this.addr_code = e.code


        },
        cancel2() {
            this.visible = false
        },
        // getqiNiuTokens() {
        //     getqiNiuToken({

        //     }).then(res => {
        //         console.log(res)
        //         this.token = res.token
        //     })
        // },
        chooseTheImg() {
            uni.chooseImage({
                count: 1,  //图片可选择数量
                sizeType: ['original', 'compressed'],  //original 原图，compressed 压缩图，默认二者都有
                sourceType: ['album'],   //album 从相册选图，camera 使用相机，默认二者都有。
                crop: {  //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
                    width: 100,
                    height: 100,

                },
                success: res => {
                    let imgFiles = res.tempFilePaths   //图片的本地文件路径列表
                    console.log(imgFiles)
                    // console.log(res)
                    this.imgFiles.forEach((item, i) => {
                        let now_time = new Date().getTime();
                        var name = now_time + i
                        this.times = name
                    })
                    this.uploadTheImg(imgFiles)
                }
            })
        },
        async uploadTheImg(imgFiles) {
            // this.getqiNiuTokens()
            let res = await getqiNiuToken()
            console.log(res);
            let { token } = res

            uni.uploadFile({
                url: 'https://upload-z1.qiniup.com',
                filePath: imgFiles[0],
                name: 'file',
                formData: {
                    token//七牛云token
                },
                success: res => {
                    let data = JSON.parse(res.data)   //返回的是字符串，需要转成对象格式，打印data如下图
                    this.avatar = `http://toutiao.longxiaokj.com/${data.key}`
                    // if (data.code == 200) {
                    //     console.log(data.msg)  //图片地址
                    // }


                },
                fail: () => {
                    console.log(res)
                }
            })
        },
        submit() {
            get_edituserInfo({
                avatar: this.avatar,
                niackname: this.username,
                sex: this.sex,
                birthday: this.birthday,
                addr: this.addr,
                addr_code: this.addr_code,
                uid: uni.getStorageSync('uid')
            }).then(res => {
                console.log(res)
            })
        }

    },
    //时间戳
    filters: {
        timeStamp(time) {
            var data = new Date(time);
            return timeStamp(data);
        }
    },

}
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    background-color: #fff;

    .contner {
        width: 100%;

        .head {
            width: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .head_title {
                font-size: 14px;
            }

            .avatar {
                width: 50px;
                height: 50px;
                position: relative;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .wrap {
            width: 90%;
            margin: 10px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .confirm {
        width: 90%;
        height: 40px;
        background-color: chartreuse;
        line-height: 40px;
        text-align: center;
        margin: 20px auto;
        border-radius: 10px;
    }
}
</style>